<div class="page">
  <div class="left">
    <div class="menu">ch02</div>
    <ul class="submenu">
      <li class="menu-item" [routerLink]="['/ch02/hello-webgl']" routerLinkActive="router-link-active" >Hello WebGL</li>
      <li class="menu-item" [routerLink]="['/ch02/drawpoint']" routerLinkActive="router-link-active" >Draw Point</li>
    </ul>

    <div class="menu">ch03</div>
    <ul class="submenu">
      <li class="menu-item" [routerLink]="['/ch03/multipoint']" routerLinkActive="router-link-active">MultiPoint</li>
      <li class="menu-item" [routerLink]="['/ch03/transform']" routerLinkActive="router-link-active">Transform</li>
    </ul>
    
    <div class="menu">ch04</div>
    <ul class="submenu">
      <li class="menu-item" [routerLink]="['/ch04/rotated-matrix4']" routerLinkActive="router-link-active">Rotate Matrix4</li>
    </ul>

    <div class="menu">ch05</div>
    <ul class="submenu">
      <li class="menu-item" [routerLink]="['/ch05/color-triangle']" routerLinkActive="router-link-active">Color Triangle</li>
      <li class="menu-item" [routerLink]="['/ch05/color-pick']" routerLinkActive="router-link-active">Color Pick</li>
      <li class="menu-item" [routerLink]="['/ch05/texture-rect']" routerLinkActive="router-link-active">Texture Rect</li>
    </ul>
    
    <div class="menu">ch07</div>
    <ul class="submenu">
      <li class="menu-item" [routerLink]="['/ch07/lookat-triangle']" routerLinkActive="router-link-active">Look at Triangle</li>
      <li class="menu-item" [routerLink]="['/ch07/lookat-rotate']" routerLinkActive="router-link-active">Look at Rotate</li>
      <li class="menu-item" [routerLink]="['/ch07/lookat-key']" routerLinkActive="router-link-active">Look at Key</li>
    </ul>
  </div>

  <div class="right">
    <router-outlet></router-outlet>
  </div>
</div>
